<template>
  <ResultTable
    v-if="props.status === 3"
    :options="optionsWithDisabled"
    :row-selection="rowSelection"
    :row-selection-disabled="true"
    :scroll="{ x: 2000 }"
    :expand-column-width="80"
    :columns="reset"
    :data-source="dataSource"
    :page="page"
    :page-size="pageSize"
    :loading="loading"
    :total="total"
    @change="onChange"
  >
    <!-- 具名作用域插槽 -->
    <template #bodyCell="{ column, text }">
      <!-- 快递是否分配 -->
      <template v-if="column.dataIndex === 'assignedStatus'">
        <div class="table-column-status" :class="text ? 'normal' : 'stop-use'">
          {{ text === 2 ? '已分配' : '待人工分配' }}
        </div>
      </template>
    </template>
  </ResultTable>

  <!-- 判断是否是点击到取消按钮 -->
  <ResultTable
    v-else
    :row-selection="rowSelection"
    :row-selection-disabled="true"
    :scroll="{ x: 2000 }"
    :expand-column-width="80"
    :columns="columns"
    :data-source="dataSource"
    :page="page"
    :page-size="pageSize"
    :loading="loading"
    :total="total"
    @change="onChange"
  >
    <!-- 具名作用域插槽 -->
    <template #bodyCell="{ column, text }">
      <!-- 快递是否分配 -->
      <template v-if="column.dataIndex === 'assignedStatus'">
        <div class="table-column-status" :class="text ? 'normal' : 'stop-use'">
          {{ text === 2 ? '已分配' : '待人工分配' }}
        </div>
      </template>
    </template>
  </ResultTable>
</template>

<script setup>
import { ref } from 'vue'
import ResultTable from '@/components/ResultTable.vue'

const props = defineProps({
  // 表格数据
  dataSource: {
    type: Array,
    default: () => [],
  },
  // 分页总数
  total: {
    type: Number,
    default: 0,
  },
  // 表格加载状态
  loading: {
    type: Boolean,
    default: false,
  },
  page: {
    type: Number,
    default: 1,
  },
  pageSize: {
    type: Number,
    default: 10,
  },
  status: {
    type: Number,
    default: undefined,
  },
})

const emit = defineEmits(['change', 'update:page', 'update:pageSize', 'edit'])

// 表格数据
const onChange = ({ current, pageSize }) => {
  // 更新页码和页容量
  emit('update:page', current)
  emit('update:pageSize', pageSize)
  // 触发父组件的 change 事件
  emit('change', { page: current, pageSize: pageSize })
}

// 表格数据 - 头部（无取消按钮项的表格）
const columns = ref([
  {
    title: '序号',
    dataIndex: 'transportTaskId',
    key: 'transportTaskId',
    width: 80,
    align: 'center',
    // ??注意：表格序号自动递增，分页后也不影响
    customRender: ({ index }) => (props.page - 1) * props.pageSize + index + 1,
  },
  {
    title: '取件作业编号',
    dataIndex: 'id', // startAgencyId
    key: 'id',
    align: 'center',
  },
  {
    title: '所在营业部',
    dataIndex: 'agencyName', // endAgencyId
    key: 'agencyName',
  },
  {
    title: '任务分配状态',
    dataIndex: 'assignedStatus', // endAgencyId
    key: 'assignedStatus',
    align: 'center',
  },
  {
    title: '快递员姓名',
    dataIndex: 'courierName',
    key: 'courierName',
    align: 'center',
  },
  {
    title: '订单编号',
    dataIndex: 'orderId',
    key: 'orderId',
    align: 'center',
  },
  {
    title: '预计开始时间',
    dataIndex: 'estimatedStartTime',
    key: 'estimatedStartTime',
    align: 'center',
  },
  {
    title: '预计完成时间',
    dataIndex: 'estimatedEndTime', // truckId
    key: 'estimatedEndTime',
    align: 'center',
  },
  {
    title: '实际完成时间',
    dataIndex: 'estimatedEndTime',
    key: 'estimatedEndTime',
    align: 'center',
  },
])

//取消按钮触发的取消对应项
const reset = ref([])
reset.value = [...columns.value]
reset.value.pop()
reset.value.splice(6, 0, {
  title: '取消时间',
  dataIndex: 'cancelTime',
  key: 'cancelTime',
  align: 'center',
})
reset.value.splice(7, 0, {
  title: '取消原因',
  dataIndex: 'cancelReason',
  key: 'cancelReason',
  align: 'center',
})

//复选框
const rowSelection = ref({
  checkStrictly: false,
  disabled: true,
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
  },
  onSelect: (record, Selected, selectedRows) => {
    console.log(record, Selected, selectedRows)
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows)
  },
})
</script>

<style scoped>
::v-deep .ant-checkbox-inpt:hover {
  cursor: not-allowed;
}
</style>
